<template>
	<view style="position: relative;">
		<view v-for="(res,index) in data" :key="index">
			
			<view v-if="res.id == 'banner'">
				<swiper autoplay="true" indicator-dots="true" circular="true" style="height: 352upx;">
					<swiper-item v-for="(img,key) in res.data" :key="key">
						<image :src="img.imgurl" style="height: 352upx;width: 100%;" model="aspectFill" @click="jumptomenu(img)" />
					</swiper-item>
				</swiper>
			</view>
			
			<!-- picture -->
			<view v-if="res.id == 'picture'" style="overflow: hidden;">
				<image v-for="(item,index5) in res.data" :key="index5" :src="item.imgurl" style="width: 100%;height: 175upx;"
				 :style="{'padding-right':res.style.paddingleft * 2 +'upx','padding-top':res.style.paddingtop * 2 +'upx','padding-bottom':res.style.paddingtop * 2 +'upx'}" @click="jumptomenu(item)" mode="widthFix"></image>
			</view>
			
			<view v-if="res.id == 'title'">
				<view :style="{'text-align':res.style.textalign,'padding-top':res.style.paddingtop+'px','padding-bottom':res.style.paddingtop+'px','padding-left':res.style.paddingleft+'px','padding-right':res.style.paddingleft+'px','background':res.style.background}">
					<text :style="{color:res.style.color,'font-size':res.style.fontsize*2+'upx'}">{{res.params.title}}</text>
				</view>
			</view>
			
			<view v-if="res.id == 'blank'" :style="{background:res.style.background,'height': res.style.height+'px'}" ></view>
			
			<view v-if="res.id == 'goods'" class="clear" :class="res.style.liststyle" :style="{background:res.style.background}">
				<view v-for="(item,i) in res.data" :key="i" class="item" @click="jumpgoods(item.gid)" style="border-radius: 44upx;overflow: hidden;">
					<image class="triangle" :src="item.thumb"></image>
					<view class="detail" style="position: relative;">
						<view class="name" style="font-size: 32upx;font-weight: 555;padding-left: 20upx;height: 48upx;color: #DA8220;">{{item.shorttitle}}</view>
						<view class="name" style="font-size: 32upx;font-weight: 555;padding-left: 20upx;height: 48upx;">{{item.title}}</view>
						<view class="name" style="font-size: 32upx;font-weight: 555;padding-left: 20upx;">{{item.subtitle}}</view>
						<view class="price webkit" v-if="res.params.showprice == 1">
							<text class="flex"  style="color: #BE1B00;font-size: 44upx;font-weight: 555;padding-left: 20upx;" > ¥{{ item.price }} </text>
						</view>
					 <view style="position: absolute;bottom: 15upx;right: 80upx;width: 200upx;height: 78upx;line-height: 78upx;text-align: center;font-size: 32upx;font-weight: 555;color: #fff;">
							<image src="../../../static/rightget.png" mode="widthFix" style="width: 240upx;"></image>
					 </view>
					</view>
				</view>
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[],
			}
		},
		onLoad:function(e){
			this.goodsid = e.id
			// console.log(this.goodsid)
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.oid ="&openid=" + res.data
					this.openid =res.data
					this.setAjax()
				},
				fail: () => {
					this.setAjax()
				}
			});
		},
		methods: {
			setAjax(){
				// console.log()
				uni.request({
					url: 'http://m.wpweipin.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=diypage&app=1&id=' + this.goodsid,
					success: res => {
						uni.hideLoading()
						this.data = res.data
						console.log(this.data)
						// 设置标题
						uni.setNavigationBarTitle({
							title: this.data.title,
						});
					},
					fail: () => {},
					complete: () => {}
				});
			},
			jumptomenu(item) {
				console.log(item)
				if(item.linkurl=="" || item.linkurl== undefined) {
					// uni.showModal({
					// title:'提示',
					// content:'功能暂未开放',
					// showCancel: false,
					// confirmColor:"#DD524D",
					// 	success() {
					// 		return
					// 	}
					// })
					return
				}
				if (item.linkurl == "../media/media") {
					uni.navigateTo({
						url: '../../media/media'
					});
					return
				}
				item = item.linkurl
				let obj = {};
				let arr1 = item.split("?");
				let arr2 = arr1[1].split("&");
				for(let i=0 ; i < arr2.length; i++){
					let res = arr2[i].split("=");
					obj[res[0]] = res[1];
				}
				item = obj
				console.log(item)
				// 跳转到自定义页面
				if (item.r == "diypage") {
					uni.navigateTo({
						url: '../goods/spree/spree?id=' + item.id
					});
				}
				// 商品详情
				if (item.r == "goods.detail") {
					uni.navigateTo({
						url: '../../goods/detail?goodsid=' + item.id
					});
				}
				if (item.r == "goods") {
					uni.navigateTo({
						url: '../goods/goods?cate=' + item.cate
					});
				}
				if (item.r == "article") {
					uni.navigateTo({
						url: '../../../pageA/essay/essay?essaysid=' + item.aid
					});
				}
				if (item.r == "articlecategory") {
					uni.navigateTo({
						url: '../../media/media?id=' + item.id
					});
				}
				if (item.r == "sign") {
					uni.navigateTo({
						url: '../../../pageA/member/sign/sign'
					});
				}
			},
			jumpgoods(id){
				uni.navigateTo({
					url: '../detail?goodsid=' + id
				})
			},
			jumpgoods2(){
				uni.navigateTo({
					url: '../detail?goodsid=247&id=33&mid=2219'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.mp-search-box{
		width: 590upx;
		height: 130upx;
		position:fixed;
		left: 0;
		top: 0;
		// top: 72upx;
		z-index: 9;
		padding: 0 80upx;
		background-color: rgba($color: #BE473F, $alpha: 0.5);
		.ser-input{
			width: 100%;
			height: 56upx;
			margin-top: 60upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			border-radius: 20px;
			background-color: #ddd;
			border: 1px solid #ccc;
		}
	}
	page {
		background: #f5f5f5;// 页面的整体背景色
	}
	.m-t{
		margin-top: 16upx;
	}
	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;
	
		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}
	
		.titleNview-background {
			// background: #BE473F; //轮播图后面暂时的静态背景色
			opacity: 0.9;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
		}
	}
	.carousel {
		width: 100%;
		height: 350upx;
		text-align: center;
	
		.carousel-item {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	
		image {
			width: 94%; // 设置 轮播图片宽度
			height: 100%;
			border-radius: 10upx;
		}
	}
	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;
	
		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}
	
		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
	/* 分类 */
	.cate-section {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		padding: 30upx 22upx; 
		background: #fff;
		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// font-size: $font-sm + 2upx;
			// color: $font-color-dark;
		}
		/* 原图标颜色太深,不想改图了,所以加了透明度 */
		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}
	.ad-1{
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;
		image{
			width:100%;
			height: 100%; 
		}
	}
	.p_father {
		width: 100%;
		height: 330upx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16upx;
	}
	.p_left {
		margin: 0 10upx;
		width: 40%;
		flex: 1;
	}
	.p_left image {
		width: 100%;
		height: 100%;
	}
	.p_right {
		margin: 0 10upx;
		width: 40%;
		flex: 1;
		display: flex;
		flex-wrap: wrap;
	}
	.img_top {
		height: 170upx;
		width: 100%;
	}
	.img_top image{
		width: 100%;
		height: 100%;
	}
	.img_bottom {
		height: 170upx;
		width: 100%;
		display: flex;
	}
	.img_bottom view {
		flex: 1;
		width: 50%;
	}
	.img_bottom view:nth-child(1) image {
		width: 96%;
		height: 92%;
		margin: 4% 4% 4% 0;
	}
	.img_bottom view:nth-child(2) image {
		width: 96%;
		height: 92%;
		margin: 4% 0% 4% 4%;
	}
	.tab_choose {
		height: 100upx;
		display: flex;
		background-color: #fff;
		color: #b71c24;
	}
	.padleft {
		color: #333;
		padding-left: 4upx;
	}
	.menu_son {
		line-height: 100upx;
		flex: 1;
		text-align: center;
	}
	.flexbox {
		display: flex;
		flex-wrap: wrap;
	}
	.flexboxson {
		width: 25%;
	}
	.block {
		padding: 8upx;
	}

	.item {
		float: left;
		width: 50%;
		padding: 10upx;
		box-sizing: border-box;
	}

	.one .item {
		width: 100%;
	}

	.three .item {
		width: 33.33%;
	}

	.triangle {
		width: 100%;
		height: 346upx;
		display: block;
	}

	.one .triangle {
		height: 714upx
	}

	.three .triangle {
		height: 224upx
	}

	.detail {
		background: #fff;
		padding: 20upx 12upx 40upx;
	}

	.name {
		height: 68upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 24upx;
		line-height: 36upx;
	}

	.price text {
		display: block;
		line-height: 40upx;
	}

	.price {
		margin-top: 12upx;
		color: #b71c24;
	}

	.mask {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		// background: rgba(0, 0, 0, .6);
	}

	.mask,
	.tips {
		display: none;
	}

	.mask.show,
	.gengxing.show {
		display: block !important;
	}
	.gengxing {
		position: fixed;
		z-index: 999;
		width: 480upx;
		height: 738upx;
		top: 50%;
		left: 50%;
		margin-left: -240upx;
		margin-top: -380upx;
		background-size: cover;
		display: none;
		overflow: hidden;
	}

	.gengxing .title {
		position: absolute;
		top: 340upx;
		text-align: center;
		color: #db3737;
		font-size: 40upx;
		font-weight: 600;
		width: 220upx;
		left: 50%;
		margin-left: -110upx;
		line-height: 44upx;
		z-index: 999;
	}

	.gengxing .title text {
		font-weight: initial;
		font-size: 24upx;
		color: #fff;
		background: #db3737;
		border-radius: 100upx;
		padding: 0 10upx;
		position: absolute;
		line-height: 36upx;
		bottom: 0;
		left: 100%;
		z-index: 999;
	}

	.dl {
		position: absolute;
		bottom: 0;
		background: transparent;
		font-size: 34upx;
		width: 100%;
		color: #fff;
		line-height: 100upx;
		z-index: 999;
	}
</style>
